<template>
	<el-dialog :title="'调班'" v-model="visible" :close-on-click-modal="false">
		<el-form>
			<el-form-item label="当前排班:" label-width="100px">
				<el-select clearable placeholder="请选择调班" v-model="form.id" popper-class="my-select" style="width: 100%"
					@change="tiaoBanSelect(form)">
					<el-option style="width: 200px;" :key="item.id"
						:label="(item.classesName + ' - ' + item.groupName + ' ' + item.workStartTime + ' - ' + item.workEndTime)"
						:value="item.id" v-for="item in  works ">
						{{ item.classesName + ' - ' + item.groupName + ' ' + item.workStartTime + ' - ' + item.workEndTime }}
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="调至日期:" label-width="100px">
				<el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="form.day"
					placeholder="请选择调至日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="调至班次:" label-width="100px">
				<el-select clearable placeholder="请选择所属班组" v-model="form.classesId" @change="banCiSelect(form.classesId)">
					<el-option :key="item.id" :label="item.classesName" :value="item.id" v-for="item in banCiLists">
						{{ item.classesName }}
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="调至班组:" label-width="100px">
				<el-select clearable placeholder="请选择所属班组" v-model="form.groupId">
					<el-option :key="item.id" :label="item.groupName" :value="item.id" v-for="item in banZuLists">
						{{ item.groupName }}
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="调至规则:" label-width="100px">
				<el-select v-model="form.ruleId" clearable placeholder="请选择起始规则">
					<el-option v-for="item in startRuleIdList" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
				<el-button type="danger" @click="onDelect" :disabled="loading">删除</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText')
				}}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="SysScheduleDialog">
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import { useDict } from '/@/hooks/dict';
const { classes_type } = useDict('classes_type');
const emit = defineEmits(['refresh']);
import { fetchList } from '/@/api/personnel/classesRules'
import { banCiList, banZuList, setuserwork, workScheduling } from '/@/api/personnel/userClasses'

// 使用国际化实例
const { t } = useI18n();

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const works = ref([])
const banCiLists = ref([]);
const banZuLists = ref([]);
const startRuleIdList = ref([]);
// 提交表单数据
const form = reactive({
	id: '',
	day: '',
	classesId: '',
	groupId: '',
	ruleId: '',
});


/**
 * 打开日程表单弹窗
 * @function
 * @param {string} id - 日程ID
 * @param {Object} row - 行数据
 */
const openDialog = (data: []) => {
	visible.value = true;
	form.id = '';
	form.day = '';
	form.classesId = '';
	form.groupId = '';
	form.ruleId = '';

	// 重置表单数据
	nextTick(() => form.value?.resetFields());

	console.log('data', data.data.day);
	getBanCiList()
	if (data.data.works.length > 0) {
		works.value = data.data.works
		form.id = data.data.works[0].id
		form.day = data.data.day;
		form.classesId = data.data.works[0].classesId
		form.groupId = data.data.works[0].groupId
		form.ruleId = data.data.works[0].ruleId

		getBanZuList(form.classesId)
		startRuleIdLists()
	}

};

const banCiSelect = (e) => {
	form.groupId = ''
	form.ruleId = ''
	getBanZuList(e)
}


const getBanCiList = () => {
	banCiList().then((res: any) => {

		banCiLists.value = res.data.records
	})
}

const getBanZuList = (e) => {
	banZuList({ classesId: e }).then((res: any) => {

		banZuLists.value = res.data.records
	})
}
const startRuleIdLists = () => {
	fetchList({
		size: 100
	}).then((response) => {
		let searchData = response.data.records
		console.log('searchData', searchData);

		startRuleIdList.value = searchData.map((item: any) => {
			return { value: item.id, label: `${item.ruleName}` }
		})
	})
}

const tiaoBanSelect = (workList) => {
	console.log('workLst', workList);

	const index = works.value.findIndex(item => item.id === workList.id);
	if (index != -1) {
		form.id = works.value[index].id
		form.day = workList.day;
		form.classesId = works.value[index].classesId
		form.groupId = works.value[index].groupId
		form.ruleId = works.value[index].ruleId

		getBanZuList(form.classesId)
		startRuleIdLists()
	}
}

/**
 * 删除表单数据
 * @function
 * @async
 */
const onDelect = async () => {
	console.log('form', form);

	useMessageBox()
		.confirm('是否确认删除此数据?')
		.then(() => {
			workScheduling([form.id]).then(() => {
				useMessage().success('删除成功');
				visible.value = false;
				emit('refresh');
			});
		})
		.catch((err) => {

		});
}

/**
 * 提交表单数据
 * @function
 * @async
 */


const onSubmit = async () => {
	// 验证表单是否符合规则
	console.log('form', form);
	if (form.classesId == '') {
		useMessage().error('请选择班次');
		return
	}
	if (form.groupId == '') {
		useMessage().error('请选择班组');
		return
	}
	if (form.day == '' || form.day == null) {
		useMessage().error('请选择时间');
		return
	}
	if (form.ruleId == '') {
		useMessage().error('请选择规则');
		return
	}
	try {

		await setuserwork(form);
		useMessage().success('修改成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};


// 暴露变量
defineExpose({ openDialog });


</script>
<style>
.my-select .el-select-dropdown__item {
	overflow: visible;
	display: block;
}
</style>
